<template>
  <template v-if="tableOptions.columns.length">
    <VfDataTable v-bind="tableOptions"></VfDataTable>
  </template>
  <template v-else>
    <div class="no-widget-hint">
      <el-empty :image-size="80" description="暂无数据" />
    </div>
  </template>
</template>

<script setup>
import { computed } from 'vue';
import { VfDataTable } from '@/components/vf-table';

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
  height: {
    type: [String, Number],
    default: 'auto',
  },
});

const tableOptions = computed(() => {
  return {
    data: props.data,
    height: props.height,
    stripe: false,
    columns: props.columns,
    rowConfig: { keyField: 'id', useKey: true },
    boxConfig: false,
    seqConfig: false,
    pagerConfig: { enabled: false },
    showOverflow: 'ellipsis',
    toolbarConfig: { enabled: true, refresh: false },
    checkboxConfig: { checkStrictly: false },
  };
});
</script>

<style lang="scss" scoped></style>
